<template>
    <ZZDialog class="settings-measure" title="工具测量" @close="callbackClose()">

        <div class="btn-group">
            <div @click="drawPolyline(false)" class="tool-btn">
                <div class="tool-thum" style="background: #dd751b;"><img src="./image/measure-length.svg" alt="空间距离"></div>
                <span class="btn_none"> 空间距离 </span>
            </div>

            <div @click="drawPolyline(true)" class="tool-btn">
                <div class="tool-thum" style="background: #c092fe;"><img src="./image/measure-length2.svg" alt="贴地距离"></div>
                <span class="btn_none"> 贴地距离 </span>
            </div>


            <!-- <div @click="drawSection()" class="tool-btn">
                <div class="tool-thum" style="background: #88b8ff;"><img src="./image/measure-section.svg" alt="剖面"></div>
                <span class="btn_none"> 剖面 </span>
            </div> -->

            <div @click="drawPolygon(false)" class="tool-btn">
                <div class="tool-thum" style="background: #3de3f4;"><img src="./image/measure-area.svg" alt="面积"></div>
                <span class="btn_none"> 水平面积 </span>
            </div>

            <div @click="drawPolygon(true)" class="tool-btn">
                <div class="tool-thum" style="background: #c092fe;"><img src="./image/measure-area.svg" alt="面积"></div>
                <span class="btn_none"> 贴地面积 </span>
            </div>

            <div @click="measureAngle" class="tool-btn">
                <div class="tool-thum" style="background: #95d333;"><img src="./image/measure-angle.svg" alt="角度"></div>
                <span class="btn_none"> 角度 </span>
            </div>


            <div @click="drawHeight" class="tool-btn">
                <div class="tool-thum" style="background: #55d5a0;"><img src="./image/measure-height.svg" alt="高度差"></div>
                <span class="btn_none"> 高度差 </span>
            </div>

            <div @click="drawHeightsuper" class="tool-btn">
                <div class="tool-thum" style="background: #37bc41;"><img src="./image/measure-height-sup.svg" alt="三角测量">
                </div>
                <span class="btn_none"> 三角测量 </span>
            </div>

            <div @click="measurePoint" class="tool-btn">
                <div class="tool-thum" style="background: #babc31;"><img src="./image/measure-coor.svg" alt="坐标测量"></div>
                <span class="btn_none"> 坐标测量 </span>
            </div>

        </div>
        <el-row :gutter="20" style="margin-top:5px;">
            <el-col :span="12" :offset="6">
                <el-checkbox v-model="checkedonlyPickModel" @change="handleCheckPickModelPositionChange"
                    label="仅测量模型(不拾取地形)" size="large" />
            </el-col>
        </el-row>


        <el-row :gutter="20" style="margin-top:5px;" v-if="blcl">
            <el-col :span="16" :offset="6">
                <el-form-item label="单位">
                    <div v-if="blength">
                        <el-select v-model="valuelength" @change="lengthchange" class="m-4" placeholder="Select">
                            <el-option v-for="item in optionslength" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>

                    </div>
                    <div v-if="!blength">
                        <el-select v-model="valuearea" @change="areachange" class="m-4" placeholder="Select">
                            <el-option v-for="item in optionsarea" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:5px;">
            <el-col :span="12" :offset="6">
                {{ valuelabel }}
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:5px;">
            <el-col :span="12" :offset="6">
                <el-button @click="callbackClose()" type="primary" round>清空测量数据</el-button>
            </el-col>
        </el-row>

    </ZZDialog>
</template>

<script>
import ZZDialog from '@/common/ZZDialog.vue';
import { Loading } from 'element-ui'

export default {
    components:{
        ZZDialog
    },
    data(){
        return{
            viewer:undefined,
            measureControl:undefined,
            blength:true,
            blcl:true,
            valuelabel:'',
            valuelength:'auto',
            optionslength: [
                {
                    label: "自动",
                    value: "auto"
                },
                {
                    label: "米",
                    value: "m"
                }, {
                    label: "公里",
                    value: "km"
                }, {
                    label: "海里",
                    value: "mile"
                }, {
                    label: "丈",
                    value: "ha"
                }
            ],
            valuearea:'auto',
            optionsarea: [
                {
                    label: "自动",
                    value: "auto"
                },
                {
                    label: "平方米",
                    value: "m"
                }, {
                    label: "平方公里",
                    value: "km"
                }, {
                    label: "亩",
                    value: "mu"
                }, {
                    label: "公顷",
                    value: "zhang"
                }
            ],
            lastVal: '',
            thisType: '',
            checkedonlyPickModel:false
        }
    },
    methods: {
        theupdateUnit(thisType, danwei) {
            this.measureControl.updateUnit(thisType, danwei);
        },
        areachange(value) {
            this.theupdateUnit(this.thisType, value);
            if (this.lastVal > 0) {
                var valstr = this.formatArea(this.lastVal, value);
                this.onMeasureChange(valstr, "");
            }
        },
        lengthchange(value) {
            this.theupdateUnit(this.thisType, value);
            if (this.lastVal > 0) {
                var valstr = this.formatLength(this.lastVal, value);
                this.onMeasureChange(valstr, "");
            }
        },
        callbackClose () {
            this.measureControl?.clearMeasure()
            this.thisType = "";
            this.lastVal = 0;
            this.$emit('close')     
        },
        onMeasureChange(valstr, val) {
            if (val) this.lastVal = val;
            this.valuelabel = valstr
        },
        handleCheckPickModelPositionChange () {
            this.viewer.zz.onlyPickModelPosition = this.checkedonlyPickModel
        },
        drawPolyline(type) {
            this.blcl = true
            this.blength= true
            this.measureControl.measureLength({
                unit: this.valuelength,
                terrain: type,
                addHeight: 0.5,  //在绘制点基础自动增加高度（单位：米）
                calback: this.onMeasureChange,
            });
        },
        drawPolygon(btd) {
            this.blcl = true
            this.blength = false
            this.thisType = "area";
            this.lastVal = 0;
            this.measureControl.measureArea({
                unit: this.valuearea,
                style: {
                    color: "#00fff2",
                    outline: true,
                    outlineColor: "#fafa5a",
                    outlineWidth: 1,
                    opacity: 0.4,
                    clampToGround: btd //贴地
                },
                calback: this.onMeasureChange,
            });
        },
        drawHeight() {
            this.blcl = true
            this.blength = true
            this.thisType = "height";
            this.lastVal = 0;
            this.measureControl.measureHeight({
                unit: this.valuelength,
                isSuper: false,
                calback: this.onMeasureChange,
            });
        },
        drawHeightsuper() {
            this.blcl = true
            this.blength = true
            this.thisType = "super_height";
            this.lastVal = 0;
            this.measureControl.measureHeight({
                unit: this.valuelength,
                isSuper: true,
                calback: this.onMeasureChange,
            });
        }, 
        showSectionResult(param, val) {
            if (typeof param === "string") {
                this.onMeasureChange(param, val);
                return;
            }
            this.onMeasureChange(param.distancestr, param.distance);
        },
        drawSection() {
            this.blcl = true
            let loading = '';
            this.blength = false
            this.thisType = "section";
            this.lastVal = 0;
            this.measureControl.measureSection({
                unit: this.valuearea,
                splitNum: 300, //插值次数
                onStart: function () {//开始分析前回调(异步)
                    loading = Loading.service({
                        lock: true,
                        text: '正在计算',
                        background: 'rgba(0, 0, 0, 0.7)',
                    })
                },
                onEnd: function () {//分析完成后回调(异步)
                    loading.close();
                },
                calback: this.showSectionResult,
            });
        },
        measureAngle() {
            this.blcl = false
            this.thisType = "angle";
            this.lastVal = 0;
            this.measureControl.measureAngle();
        },
        measurePoint() {
            this.blcl = false
            this.thisType = "point";
            this.lastVal = 0;
            this.measureControl.measurePoint();
        },
        formatArea(val, unit) {
            return this.measureControl.formatArea(val, unit);
        },
        formatLength(val, unit) {
            return this.measureControl.formatLength(val, unit);
        }
    },
    beforeMount() {
        this.viewer = this.$store.state.viewer
    },
    mounted() {
        this.measureControl = new zz3d.analysi.Measure({
            viewer: this.viewer
        })
    },
}

</script>
<style scoped>
.btn_none {
    background: none;
    color: #fff;
}

.btn-group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-left: 20px;
}

.tool-btn {
    cursor: pointer;
    user-select: none;
    min-width: 62px;
    height: 96px;
    box-sizing: border-box;
    margin: 0 30px 10px 0;
    text-align: center;
    padding-top: 12px;
}


.tool-thum {
    transition: all .2s ease;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    margin-bottom: 10px;
    background: #fd960f;
    cursor: pointer;
}
.tool-thum>img{
    width: 24px;
    height: 24px;
    margin: 13px;
}

.settings-measure {
    position: absolute;
    width: 300px;
    right: 105px;
    top: 50px;
}
</style>